<!--
 * @Author: Zhang Kai
 * @Date: 2021-10-18 16:32:22
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-09 16:14:38
 * @FilePath: /metricsx-standard-ui/src/components/siden-nav.vue
-->
<template>
  <el-menu unique-opened router :collapse="isCollapse" v-bind="menuConfig">
    <v-nav-item
      v-for="item of selectPermission"
      :key="item.resourceLink"
      :item="item"
      :nav-index="item.resourceLink"
    />
  </el-menu>
</template>

<script lang="ts" setup>
import { computed, defineProps, reactive, watch } from 'vue';
import VNavItem from './nav-item.vue';
import { useRoute } from 'vue-router';
import { usePermissionStore } from '@/store/permission';
// 获取菜单
const store = usePermissionStore();
const selectPermission = computed(() => {
  return store.$state.selectPermission;
});
const route = useRoute();
// 获取当前路径路径
const activeIndex = computed(() => {
  return route.path;
});
watch(selectPermission.value, (to) => {
  console.log(activeIndex.value);
});

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
});

const menuConfig = reactive({
  backgroundColor: '#FFFFFF',
  activeTextColor: '#3C6EFF',
  textColor: '#33353B',
  collapseTransition: false,
  class: 'el-menu-vertical-demo',
  defaultActive: activeIndex
});
</script>
<style lang="scss">
.el-menu-vertical-demo {
  .el-sub-menu {
    .el-sub-menu__title .el-tooltip__trigger .el-tooltip__trigger {
      padding: 0px;
    }
    .el-sub-menu__title {
      // padding-left: 20px;
      position: relative;
      &:hover {
        background-color: #f1f3f8 !important;
      }
    }

    .is-active {
      background: #f1f3f8 !important;
    }
  }

  .el-menu-item.is-active {
    position: relative;
    box-shadow: 3px 0px 0px 0px #3c6eff inset;
    font-weight: 500;
  }

  .el-menu-item {
    &:hover {
      background-color: #f7f9fc !important;
    }
  }
}
</style>
